<template>
    <el-dialog title="领取记录" :visible.sync="showObtainRecord" width="860px" @open="handleDialogOpen">
      <div class="record-wrap">
        <div class="record-inner">
            <el-table :data="recordList">
                <el-table-column label="奖品名" prop="reward_name" show-overflow-tooltip/>
                <el-table-column label="奖品数" prop="total" show-overflow-tooltip/>
                <el-table-column label="领取次数" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{scope.row.total - scope.row.remain}}</span>
                  </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 头部查询 start -->
        <el-form ref="queryForm" class="query-form" :model="queryParams" inline size="small">
            <el-form-item class="big-query" label="用户UID" prop="user_id" size="small">
               <el-input v-model="queryParams.user_id"></el-input>
            </el-form-item>
            <el-form-item label="奖品名" prop="reward_id">
                <el-select v-model="queryParams.reward_id" placeholder="全部" @change="handleQuery">
                    <el-option :key="0" label="全部" :value="0" />
                    <el-option v-for="it in recordList" :key="it.reward_id" :label="it.reward_name" :value="it.reward_id" />
                </el-select>
            </el-form-item>
            <el-form-item class="big-query" label="领取时间" prop="dateRange" size="small">
                <el-date-picker v-model="queryParams.dateRange"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="~"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change="handleQuery">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleQuery">搜索</el-button>
                <el-button @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <!-- 头部查询 end -->
        <el-table :data="userRecordList" :height="300">
            <el-table-column
              type="index"
              width="50">
            </el-table-column>
            <el-table-column label="用户UID" prop="user_id" show-overflow-tooltip/>
            <el-table-column label="用户名" prop="user_name"/>
            <el-table-column label="领取时间">
              <template slot-scope="scope">
                <span>{{scope.row.draw_time | parseTime}}</span>
              </template>
            </el-table-column>
            <el-table-column label="奖品名" prop="reward_name"/>
        </el-table>
        <pagination v-show="total>0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.page_size" @pagination="getList" />
    </div>
    </el-dialog>
</template>
<script>
import { getDrawList, getRewardStatics } from '@/api/reward-manage'
export default {
  props: {
    actId: [String, Number],
    visible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      showObtainRecord: this.visible,
      recordList: [],
      userRecordList: [],
      total: 0,
      queryParams: {
        page: 1,
        page_size: 10,
        user_id: '',
        reward_id: '',
        source_type: 'act',
        dateRange: []
      }
    }
  },
  watch: {
    visible (val) {
      this.showObtainRecord = val
    },
    showObtainRecord (val) {
      this.$emit('update:visible', val)
    }
  },
  methods: {
    handleDialogOpen () {
      this.getRewardStatics()
      this.getList()
    },
    getRewardStatics () {
      getRewardStatics({
        act_id: this.actId
      }).then(res => {
        this.recordList = res.data.list
      })
    },
    /** 搜索按钮操作 */
    handleQuery () {
      this.queryParams.page = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery () {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    /** 查询列表 */
    getList () {
      const params = Object.assign({}, this.queryParams)
      params.source_id = this.actId
      if (params.dateRange && params.dateRange.length) {
        params.created_at = new Date(params.dateRange[0]).getTime() / 1000
        params.end_at = new Date(params.dateRange[1]).getTime() / 1000
      }
      delete params.dateRange
      getDrawList(params).then(response => {
        this.userRecordList = response.data.list
        this.total = response.data.count || 0
      }
      )
    }
  }
}
</script>
<style lang="scss" scoped>
.query-form {
    ::v-deep .el-input--small {
        max-width: 130px;
    }
}
.record-inner {
    margin-bottom: 20px;
}
</style>
